<template>
  <div v-loading="loading" class="wrapper-list">
    <el-row class="header">
      <el-button type="primary" @click="handleAddDialog">添加</el-button>
      <el-button type="primary" @click="handleDialog">批量删除</el-button>
    </el-row>
    <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="编号" min-width="200" />
      <el-table-column prop="order" label="排序" width="100" />
      <el-table-column prop="cate_name" label="分类" min-width="200" />
      <el-table-column prop="create_at" label="添加时间" min-width="120" />
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="handleAddDialogEdit(scope)">编辑</el-button>
          <el-button type="primary" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>listQuery.limit" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog
      :visible.sync="centerDialogVisible"
      title="是否删除"
      width="30%"
      center
    >
      <el-row>
        <el-radio v-model="radio" label="0">是</el-radio>
        <el-radio v-model="radio" label="1">否</el-radio>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAttestation">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="addDialog"
      :title="info.title"
      width="50%"
      center
      class="addEdint"
    >
      <el-row>
        <div class="name">
          <div class="title">分类名称：</div>
          <el-input v-model="info.cate_name" placeholder="请输入分类名称" class="input" />
        </div>
        <div class="sort">
          <div class="title">排序：</div>
          <el-input v-model="info.order" placeholder="请输入排序大小" class="input" />
        </div>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="handAddContent">确 定</el-button>
      </span>
    </el-dialog>
    <router-view />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils'
import { classifyList, classifydelete, productSort, classifyAdd, classifyEdit } from '@/api/product'
export default {
  name: 'Classify',
  components: {
    Pagination
  },
  data() {
    return {
      content: '',
      deleteArr: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      list: [],
      centerDialogVisible: false,
      addDialog: false,
      radio: '0',
      info: {
        cate_name: '',
        order: 0,
        title: '添加分类',
        id: ''
      },
      loading: false
    }
  },
  computed: {
    tableData() {
      return this.list.map((item) => {
        item = Object.assign({}, item, { edit: false })
        if (item.create_at) {
          item.create_at = parseTime(item.create_at)
        }
        return item
      })
    }
  },
  watch: {
    $route() {
      this.initList()
    }
  },
  created() {
    this.initList()
  },
  methods: {
    // 批量选择
    handleSelectionChange(val) {
      this.deleteArr = val
    },
    // 分页
    getList(prop) {
      this.listQuery.page = prop.page
      this.listQuery.limit = prop.limit
      this.initList()
    },
    // 列表
    initList() {
      this.loading = true
      const { page, limit } = this.listQuery
      classifyList({ page, limit })
        .then((res) => {
          this.loading = false
          const { total, lists } = res.data
          this.total = total
          this.list = lists
        })
    },
    // 是否删除
    handleDialog() {
      if (!this.deleteArr.length) {
        this.$message.warning({
          message: '请选择删除项',
          duration: 1000
        })
        this.centerDialogVisible = false
        return
      }
      this.centerDialogVisible = true
    },
    // 删除
    deleteItem(id, index) {
      classifydelete({ ids: id })
        .then((res) => {
          this.$message.success({
            message: '删除成功',
            duration: 1000
          })
          this.tableData.splice(index, 1)
        }).catch((e) => {
          // this.$message.success({
          //   message: '分类使用中，不能删除',
          //   duration: 1000
          // })
        })
    },
    // 批量删除
    deleteAllList(ids) {
      classifydelete(ids)
        .then((res) => {
          this.$message.success({
            message: '删除成功',
            duration: 1000
          })
          this.initList()
        }).catch((e) => {
          // this.$message.error({
          //   message: '分类使用中，不能删除',
          //   duration: 1000
          // })
        })
      this.centerDialogVisible = false
    },
    // 确认删除
    handleAttestation() {
      const result = []
      if (this.radio === '0') {
        this.deleteArr.map((item) => {
          result.push(item.id)
        })
        const ids = result.join(',')
        this.deleteAllList({ ids })
      } else {
        this.centerDialogVisible = false
      }
    },
    // 单一删除
    handleDelete(scope) {
      const { id } = scope.row
      const index = scope.$index
      this.deleteItem(id, index)
    },
    // 添加
    handleAddDialog() {
      this.addDialog = true
      this.info.cate_name = ''
      this.info.order = 0
    },
    // 编辑
    handleAddDialogEdit(scope) {
      this.addDialog = true
      this.info = {
        cate_name: scope.row.cate_name,
        title: '编辑分类',
        id: scope.row.id,
        order: scope.row.order
      }
    },
    // 添加内容
    async handAddContent() {
      const { info } = this
      const flag = this.validity()
      if (!flag) return
      if (info.title === '添加分类') {
        await classifyAdd({ cate_name: info.cate_name, order: info.order })
        this.$message.success({
          message: '添加成功',
          duration: 1000
        })
        this.initList()
        this.addDialog = false
      } else {
        await classifyEdit({ cate_name: info.cate_name, order: info.order, id: info.id })
        this.$message.success({
          message: '修改成功',
          duration: 1000
        })
        this.initList()
        this.addDialog = false
      }
    },
    validity() {
      const { info } = this
      if (info.cate_name.trim() === '') {
        this.$message.warning({
          message: '分类名称不能为空',
          duration: 1000
        })
        return false
      }
      if (isNaN(Number(info.order))) {
        this.$message.warning({
          message: '排序应为数字',
          duration: 1000
        })
        return false
      }
      return true
    },
    // 编辑
    // async editContent(content, id) {
    //   return await edit({ content, id })
    // },
    async confirmEdit(params) {
      const { content, id } = params
      const info = await this.editContent(content, id)
      this.$message.success({
        message: info.msg,
        duration: 1000
      })
      params.edit = false
    },
    // 取消
    cancelEdit(params) {
      params.edit = false
    },
    // 排序
    handleSort(scope) {
      const { id } = scope.row
      return this.tableData.map((item) => {
        item.edit = item.id === id
      })
    },
    async handleKeyDown(params) {
      const { id, sort } = params
      await productSort({ id, sort })
      params.edit = false
      this.initList()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper-list {
  width: 100%;
  box-sizing: border-box;
  .header {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }
  .textarea{
    width: 100%;
    height: 300px;
    max-height: 400px;
    padding: 20px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 24px;
    color: #050505;
    resize: none;
  }
  .edit-input{
    width: 80%;
    margin-bottom: 10px;
  }
  .name,.sort {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title{
      width: 100px;
    }
    .input {
      width: 400px;
    }
  }
}
</style>
